<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>主页</title>
    <link rel="stylesheet" href="css/index.css" media="screen" title="no title">
    <link rel="stylesheet" href="css/cyclopedia.css" media="screen" title="no title">
    <link rel="stylesheet" href="css/header.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/footer.css" media="screen" title="no title" charset="utf-8">
    <script src="js/index.js" charset="utf-8"></script>
    <script src="js/jquery-3.1.0.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="header">
        <div class="head">
            <ul class="firstHead">
                <li><a href="index.html" target="_blank">波奇首页</a></li>
                <li><a href="shop.html" target="_blank">波奇商城</a></li>
                <li><a href="serve.html" target="_blank">波奇服务</a></li>
                <li><a href="message.html" target="_blank">波奇论坛</a></li>
                <li><a href="cyclopedia.html" target="_blank">宠物百科</a></li>
            </ul>
            <ul class="attention">
                <li><a href="#">关注我们<span><img src="" alt="" /></span></a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#"><span><img src="" alt="" /></span>收藏</a></li>
            </ul>
            <ul class="register">
                <li><a href="login.html" target="_blank">登陆</a></li>
                <li><a href="script:;">|</a></li>
                <li><a href="register.html" target="_blank">免费注册</a></li>
            </ul>
            <ul class="userLogin">
                <li>
                    <a href="script:;" id="userName"></a>
                </li>
                <li>|</li>
                <li><a href="script:;" id="quit">退出</a></li>
            </ul>

        </div>
    </div>
    <div class="navigation">
        <div class="logo">
            <img src="source/images/logo.gif" alt="" />
        </div>
        <div class="serch">
            <input id="keyword" type="text" name="name" value="" placeholder="请输入关键字">
            <img id="search" src="source/images/ind_sch.png" alt="" />
        </div>
        <div class="app">
            <a href="#"><img src="source/images/app.jpeg" alt="" /></a>
        </div>
    </div>
    <div class="wheel">
      <div class="nav">
        <ul>
          <li style="background:rgb(238,85,68)"><a href="index.html">首页</a></li>
          <li><a href="dog.html">狗狗</a></li>
          <li><a href="mao.html">猫咪</a></li>
          <li><a href="xiaochong.html">小宠</a></li>
          <li><a href="shuizu.html">水族</a></li>
          <li><a href="pachong.html">爬虫</a></li>
          <li class="li1"><a href="serve.html"><span><img src="" alt="" /></span>波奇服务</a></li>
          <li class="li2"><a href="shop.html"><span><img src="" alt="" /></span>波奇商城</a></li>
        </ul>
      </div>
      <div class="gear">
        <ul class="banner">
          <li><a href="script:;"><img src="source/images/wheel1.jpg" alt="" /></a></li>
          <li><a href="script:;"><img src="source/images/wheel2.jpg" alt="" /></a></li>
          <li><a href="script:;"><img src="source/images/wheel3.jpg" alt="" /></a></li>
          <li><a href="script:;"><img src="source/images/wheel4.jpg" alt="" /></a></li>
          <li><a href="script:;"><img src="source/images/wheel5.jpg" alt="" /></a></li>
        </ul>
        <ul class="circles">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
        <div class="classify">
          <ul class="classify_boqi">
            <li><a href="shop.html"><dl class="boqi">
              <dt><img src="source/images/boqi_1.png" alt="" /></dt>
              <dd>波奇商城</dd>
              <dd>万件宠物用品一网打尽购实惠</dd>
            </dl></a></li>
            <li><a href="serve.html"><dl class="boqi">
              <dt><img src="source/images/boqi_2.png" alt="" /></dt>
              <dd>波奇服务</dd>
              <dd>涵盖宠物美容／寄养／绝育等服务</dd>
            </dl></a></li>
            <li><a href="message.html"><dl class="boqi">
              <dt><img src="source/images/boqi_3.png" alt="" /></dt>
              <dd>波奇论坛</dd>
              <dd>与它共同玩出个精彩世界</dd>
            </dl></a></li>
            <li><a href="cyclopedia.html"><dl class="boqi">
              <dt><img src="source/images/boqi_4.png" alt="" /></dt>
              <dd>宠物百科</dd>
              <dd>为爱宠的健康生活保驾护航</dd>
            </dl></a></li>
          </ul>
        </div>
      </div>
      <div class="recommend">
        <ul class="img_cont">
          <li><a href="script:;"><div class="img_left">
            <p>量身定制营养</p><p>皇家宠粮</p>
          </div><div class="img_right">
            <img src="source/images/3.jpg" alt="" />
          </div></a></li>
          <li><a href="script:;"><div class="img_left">
            <p>让伸展更自由</p><p>福莱希牵引</p>
          </div><div class="img_right">
            <img src="source/images/1.jpg" alt="" />
          </div></a></li>
          <li><a href="script:;"><div class="img_left">
            <p>告别毛球君</p><p>速效化毛</p>
          </div><div class="img_right">
            <img src="source/images/2.jpg" alt="" />
          </div></a></li>
          <li><a href="script:;"><div class="img_left">
            <p>驱虫有奇效</p><p>福来恩驱虫</p>
          </div><div class="img_right">
            <img src="source/images/4.jpg" alt="" />
          </div></a></li>
          <li><h3>波奇快报</h3><a href="script:;">官方QQ群：123456789</a><a href="script:;">百科专家</a></li>
        </ul>
      </div>
    </div>
      <div class="animal">
        <div class="dog">
          <div class="kind">
            <img src="source/images/gou.png" alt="" />
            <h2>狗狗</h2>
          </div>
          <div class="dog_body">
            <div class="dog_top">
              <div class="dog_top_l">
                <div class="focus_banner">
                  <div class="focus">
                    <a href="script:;"><img src="source/images/dog_wheel2.jpg" alt="" /></a>
                    <a href="script:;"><img src="source/images/dog_wheel1.jpg" alt="" /></a>
                    <a href="script:;"><img src="source/images/dog_wheel3.jpg" alt="" /></a>
                  </div>
                  <div class="round">
                    <p></p>
                    <p></p>
                    <p></p>
                  </div>
                </div>
              </div>
              <div class="dog_top_r">
                <div class="top_t">
                  <h3><a href="script:;">狗狗用品>></a></h3>
                  <ul id="dogMerchandise">

                  </ul>
                </div>
                <div class="top_b">
                  <h3><a href="script:;">狗狗服务>></a></h3>
                  <ul class="server">
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/dog_5.jpg" alt="" /></dt>
                        <dd class="dd1">狗狗洗护</dd>
                        <dd class="dd2">专业洗护，让你的爱宠更加洁净可爱～</dd>
                    </dl></a></li>
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/dog_6.jpg" alt="" /></dt>
                      <dd class="dd1">狗狗造型</dd>
                      <dd class="dd2">精致造型，让爱宠焕发迷人光彩～</dd>
                    </dl></a></li>
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/dog_7.jpg" alt="" /></dt>
                      <dd class="dd1">狗狗寄养</dd>
                      <dd class="dd2">假日狗狗去哪里？宠物服务来帮你～</dd>
                    </dl></a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="dog_bottom">
              <div class="dog_bottom_l">
                  <h3><a href="script:;">狗狗论坛>></a></h3>
                    <dl class="forum">
                      <dt><a href="script:;"><img src="source/images/forum_dog.png" alt="" /></a></dt>
                      <dd><a href="script:;">世界上最聪明的十种狗狗</a></dd>
                      <dd>世界各大犬业协会及数百名训犬专家</dd>
                    </dl>
                    <dl class="forum">
                      <dt><a href="script:;"><img src="source/images/forum_dog.png" alt="" /></a></dt>
                      <dd>狗狗界这8种妖娆的大长腿我给满分！</dd>
                      <dd>小短腿柯基犬、腊肠犬萌萌哒？其实汪界的长腿汪也...</dd>
                    </dl>
              </div>
              <div class="dog_bottom_m">
                <h3><a href="script:;">狗狗百科>></a></h3>
                  <div class="btn_l btn_l1"></div>
                  <div class="dog_slide dog_slide1">
                     <div class="tempWrap tempWrap1" id="dogs">

                     </div>
                  </div>
                  <div class="btn_r btn_r1"></div>
              </div>
              <div class="dog_bottom_r">
                  <a href="script:;"><dl class="">
                    <dt><img src="source/images/dog.jpg" alt="" /></dt>
                    <dd>狗狗品种大全</dd>
                    <dd>狗狗的籍贯，体型，寿命</dd>
                  </dl></a>
              </div>
            </div>
          </div>
        </div>
        <div class="dog">
          <div class="kind">
            <img src="source/images/mao.png" alt="" />
            <h2>猫咪</h2>
          </div>
          <div class="dog_body">
            <div class="dog_top">
              <div class="dog_top_l">
                <div class="focus_banner focus_banner1">
                  <div class="focus focus1">
                    <a href="script:;"><img src="source/images/cat_wheel1.jpg" alt="" /></a>
                    <a href="script:;"><img src="source/images/cat_wheel2.jpg" alt="" /></a>
                    <a href="script:;"><img src="source/images/cat_wheel3.jpg" alt="" /></a>
                  </div>
                  <div class="round round1">
                    <p></p>
                    <p></p>
                    <p></p>
                  </div>
                </div>
              </div>
              <div class="dog_top_r">
                <div class="top_t">
                  <h3><a href="script:;">猫咪用品>></a></h3>
                  <ul id="catMerchandise">

                  </ul>
                </div>
                <div class="top_b">
                  <h3><a href="script:;">猫咪服务>></a></h3>
                  <ul class="server" >
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/cat_5.jpg" alt="" /></dt>
                        <dd class="dd1">猫咪洗护</dd>
                        <dd class="dd2">洗个澡，让您的爱宠干干净净没烦恼~～</dd>
                    </dl></a></li>
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/cat_6.jpg" alt="" /></dt>
                      <dd class="dd1">猫咪寄养</dd>
                      <dd class="dd2">假日猫咪去哪里？宠物服务来帮你～</dd>
                    </dl></a></li>
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/cat_7.jpg" alt="" /></dt>
                      <dd class="dd1">猫咪医疗</dd>
                      <dd class="dd2">专业保障，为您爱宠的健康保驾护航~</dd>
                    </dl></a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="dog_bottom">
              <div class="dog_bottom_l">
                  <h3><a href="script:;">猫咪论坛>></a></h3>
                    <dl class="forum">
                      <dt><a href="script:;"><img src="source/images/001.jpg" alt="" /></a></dt>
                      <dd><a href="script:;">10大纯种猫咪智商排行榜！</a></dd>
                      <dd>我们知道，边牧，泰迪，金毛等狗狗的智商是非常高的</dd>
                    </dl>
                    <dl class="forum">
                      <dt><a href="script:;"><img src="source/images/forum_dog.png" alt="" /></a></dt>
                      <dd>你家喵星人不会因为你爱它，它就爱你</dd>
                      <dd>你家喵星人并没有你想像的那么爱你，你家猫咪猜懒得理你</dd>
                    </dl>
              </div>
              <div class="dog_bottom_m">
                <h3><a href="script:;">猫咪百科>></a></h3>
                  <div class="btn_l btn_l2"></div>
                  <div class="dog_slide dog_slide2">
                     <div class="tempWrap tempWrap2" id="cats">

                     </div>
                  </div>
                  <div class="btn_r btn_r2"></div>
              </div>
              <div class="dog_bottom_r">
                  <a href="script:;"><dl class="">
                    <dt><img src="source/images/cat.jpg" alt="" /></dt>
                    <dd>猫咪品种大全</dd>
                    <dd>你知道世界上有多少种猫咪吗？</dd>
                  </dl></a>
              </div>
            </div>
          </div>
        </div>
        <div class="dog">
          <div class="kind">
            <img src="source/images/tu.png" alt="" />
            <h2>小宠</h2>
          </div>
          <div class="dog_body">
            <div class="dog_top">
              <div class="dog_top_l">
                <div class="focus_banner focus_banner2">
                  <div class="focus focus2">
                    <a href="script:;"><img src="source/images/small_wheel1.jpg" alt="" /></a>
                    <a href="script:;"><img src="source/images/small_wheel2.jpg" alt="" /></a>
                    <a href="script:;"><img src="source/images/small_wheel3.jpg" alt="" /></a>
                  </div>
                  <div class="round round2">
                    <p></p>
                    <p></p>
                    <p></p>
                  </div>
                </div>
              </div>
              <div class="dog_top_r">
                <div class="top_t">
                  <h3><a href="script:;">小宠热门用品>></a></h3>
                  <ul id="smallMerchandise">

                  </ul>
                </div>
                <div class="top_b">
                  <h3><a href="script:;">小宠热门用品>></a></h3>
                  <ul class="server">
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/small_5.jpg" alt="" /></dt>
                        <dd class="dd1">仓鼠用品</dd>
                        <dd class="dd2">主粮、磨牙、水壶食盆、浴室厕所、玩具、笼窝～</dd>
                    </dl></a></li>
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/small_6.jpg" alt="" /></dt>
                      <dd class="dd1">龙猫用品</dd>
                      <dd class="dd2">主粮、磨牙、水壶食盆、浴室厕所、玩具、笼窝～</dd>
                    </dl></a></li>
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/small_7.jpg" alt="" /></dt>
                      <dd class="dd1">兔子用品</dd>
                      <dd class="dd2">主粮、除臭木屑、玩具、医疗保健、笼子</dd>
                    </dl></a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="dog_bottom">
              <div class="dog_bottom_l">
                  <h3><a href="script:;">小宠论坛>></a></h3>
                    <dl class="forum">
                      <dt><a href="script:;"><img src="source/images/forum_dog.png" alt="" /></a></dt>
                      <dd><a href="script:;">这只鹦鹉好可爱，摸起来感觉萌萌哒</a></dd>
                      <dd>这只蓝色的鹦鹉特别乖，摸起来感觉手感也不错~看完</dd>
                    </dl>
                    <dl class="forum">
                      <dt><a href="script:;"><img src="source/images/forum_dog.png" alt="" /></a></dt>
                      <dd>萌萌哒的仓鼠不是你想养就能养</dd>
                      <dd>萌萌哒的仓鼠是不是很想养一只呢？不过在养仓鼠之</dd>
                    </dl>
              </div>
              <div class="dog_bottom_m">
                <h3><a href="script:;">小宠百科>></a></h3>
                  <div class="btn_l btn_l3"></div>
                  <div class="dog_slide dog_slide3">
                     <div class="tempWrap tempWrap3" id="small">

                     </div>
                  </div>
                  <div class="btn_r btn_r3"></div>
              </div>
              <div class="dog_bottom_r">
                  <a href="script:;"><dl class="">
                    <dt><img src="source/images/small.jpg" alt="" /></dt>
                    <dd>小宠品种大全</dd>
                    <dd>萌宠，是美媚们的饲养首选...</dd>
                  </dl></a>
              </div>
            </div>
          </div>
        </div>
        <div class="dog">
          <div class="kind">
            <img src="source/images/shuizu.png" alt="" />
            <h2>水族</h2>
          </div>
          <div class="dog_body">
            <div class="dog_top">
              <div class="dog_top_l">
                <div class="focus_banner focus_banner3">
                  <div class="focus focus3">
                    <a href="script:;"><img src="source/images/water_wheel1.jpg" alt="" /></a>
                    <a href="script:;"><img src="source/images/water_wheel2.jpg" alt="" /></a>
                    <a href="script:;"><img src="source/images/water_wheel3.jpg" alt="" /></a>
                  </div>
                  <div class="round round3">
                    <p></p>
                    <p></p>
                    <p></p>
                  </div>
                </div>
              </div>
              <div class="dog_top_r">
                <div class="top_t">
                  <h3><a href="script:;">水族热门用品>></a></h3>
                  <ul id="waterMerchandise">

                  </ul>
                </div>
                <div class="top_b">
                  <h3><a href="script:;">水族用品分类>></a></h3>
                  <ul class="server">
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/water_5.jpg" alt="" /></dt>
                        <dd class="dd1">水族设备</dd>
                        <dd class="dd2">鱼缸、迷你水族箱、鱼缸配件、鱼缸底柜～</dd>
                    </dl></a></li>
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/water_6.jpg" alt="" /></dt>
                      <dd class="dd1">水族饲料</dd>
                      <dd class="dd2">颗粒性、虫干虾干、活体饲料、薄片、贴片～</dd>
                    </dl></a></li>
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/dog_7.jpg" alt="" /></dt>
                      <dd class="dd1">水族药剂</dd>
                      <dd class="dd2">疾病治疗、净水、杀菌、营养品 硝化细菌～</dd>
                    </dl></a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="dog_bottom">
              <div class="dog_bottom_l">
                  <h3><a href="script:;">水族论坛>></a></h3>
                    <dl class="forum">
                      <dt><a href="script:;"><img src="source/images/water_6.jpg" alt="" /></a></dt>
                      <dd><a href="script:;">金鱼的性别，你会辨别吗？</a></dd>
                      <dd>很多养了金鱼的人并不知道自己养的金鱼是雌是雄，其实确定金鱼的性别并非难事，一起阅读本文内容来了解。</dd>
                    </dl>
                    <dl class="forum">
                      <dt><a href="script:;"><img src="source/images/forum_dog.png" alt="" /></a></dt>
                      <dd>神仙鱼——水族爱好者最喜欢的鱼之一</dd>
                      <dd>神仙鱼，因为神仙鱼游动的时候仿佛燕子飞翔一样，它又</dd>
                    </dl>
              </div>
              <div class="dog_bottom_m">
                <h3><a href="script:;">水族百科>></a></h3>
                  <div class="btn_l btn_l4"></div>
                  <div class="dog_slide dog_slide4">
                     <div class="tempWrap tempWrap4" id="water">

                     </div>
                  </div>
                  <div class="btn_r btn_r4"></div>
              </div>
              <div class="dog_bottom_r">
                  <a href="script:;"><dl class="">
                    <dt><img src="source/images/dog_1.jpg" alt="" /></dt>
                    <dd>水族品种大全</dd>
                    <dd>千奇百态的水族宠物世界...</dd>
                  </dl></a>
              </div>
            </div>
          </div>
        </div>
        <div class="dog">
          <div class="kind">
            <img src="source/images/pachong.png" alt="" />
            <h2>爬虫</h2>
          </div>
          <div class="dog_body">
            <div class="dog_top">
              <div class="dog_top_l">
                <div class="focus_banner focus_banner4">
                  <div class="focus focus4">
                    <a href="script:;"><img src="source/images/reptile_wheel1.jpg" alt="" /></a>
                    <a href="script:;"><img src="source/images/reptile_wheel2.jpg" alt="" /></a>
                    <a href="script:;"><img src="source/images/reptile_wheel3.jpg" alt="" /></a>
                  </div>
                  <div class="round round4">
                    <p></p>
                    <p></p>
                    <p></p>
                  </div>
                </div>
              </div>
              <div class="dog_top_r">
                <div class="top_t">
                  <h3><a href="script:;">爬虫热门用品>></a></h3>
                  <ul id="reptileMerchandise">

                  </ul>
                </div>
                <div class="top_b">
                  <h3><a href="script:;">爬虫用品分类>></a></h3>
                  <ul class="server">
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/reptile_5.jpg" alt="" /></dt>
                        <dd class="dd1">陆龟用品</dd>
                        <dd class="dd2">龟箱 龟粮 灯具 加热等 医疗保健 造景 食具～</dd>
                    </dl></a></li>
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/reptile_6.jpg" alt="" /></dt>
                      <dd class="dd1">水龟用品</dd>
                      <dd class="dd2">龟缸 灯具 龟粮 龟医疗 造景 食具 躲避台 配件～</dd>
                    </dl></a></li>
                    <li><a href="script:;"><dl class="name">
                      <dt><img src="source/images/reptile_7.jpg" alt="" /></dt>
                      <dd class="dd1">蜥蜴蛇用品</dd>
                      <dd class="dd2">保健品系列 加热取暖设备～</dd>
                    </dl></a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="dog_bottom">
              <div class="dog_bottom_l">
                  <h3><a href="script:;">爬虫论坛>></a></h3>
                    <dl class="forum">
                      <dt><a href="script:;"><img src="source/images/forum_dog.png" alt="" /></a></dt>
                      <dd><a href="script:;">不小心被蜥蜴咬了应该怎么办？</a></dd>
                      <dd>宠物猫狗时常会有咬人挠人的情况发生，那么蜥蜴会咬人</dd>
                    </dl>
                    <dl class="forum">
                      <dt><a href="script:;"><img src="source/images/forum_dog.png" alt="" /></a></dt>
                      <dd>宠物龟的生活习性</dd>
                      <dd>要想养好宠物龟，首先必须了解清楚宠物龟的生活习性...</dd>
                    </dl>
              </div>
              <div class="dog_bottom_m">
                <h3><a href="script:;">爬虫百科>></a></h3>
                  <div class="btn_l btn_l5"></div>
                  <div class="dog_slide dog_slide5">
                     <div class="tempWrap tempWrap5" id="reptile">

                     </div>
                  </div>
                  <div class="btn_r btn_r5"></div>
              </div>
              <div class="dog_bottom_r">
                  <a href="script:;"><dl class="">
                    <dt><img src="source/images/dog_1.jpg" alt="" /></dt>
                    <dd>爬虫品种大全</dd>
                    <dd>另类宠物也有可爱的一面...</dd>
                  </dl></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ensure">
        <div class="ensure_img">
          <img src="source/images/ensure.png" alt="" />
        </div>
      </div>
      <div class="footer">
         <ul>
           <li><a href="script:;">关于我们</a></li>|
           <li><a href="script:;">友情链接</a></li>|
           <li><a href="script:;">诚聘英才</a></li>|
           <li><a href="script:;">联系我们</a></li>|
           <li><a href="script:;">网站地图</a></li>|
           <li><a href="script:;">意见反馈</a></li>|
           <li><a href="script:;">帮助中心</a></li>|
           <li><a href="script:;">客服热线：123456789</a></li>
         </ul>
         <p>
           Copyright © 2007-2016 Boqii.com All Rights Reserved 光橙（上海）信息科技有限公司 版权所有 沪ICP备13034501号-2 增值电信业务经营许可证：沪B2-20140120
         </p>
         <p class="href">
            <a href="http://www.sgs.gov.cn/"><img src="source/images/foot_gs.png" alt="" /></a>
            <a href="script:;"><img src="source/images/foot_cx.png" alt="" /></a>
            <a href="script:;"><img src="source/images/foot_kx.png" alt="" /></a>
            <a href="script:;"><img src="source/images/foot_zx.png" alt="" /></a>
         </p>
      </div>
  </body>
  <script type="text/javascript">

  var register = document.getElementsByClassName("register")[0];
  var userLogin =document.getElementsByClassName("userLogin")[0];
  var userName = document.getElementById("userName");
  var quit = document.getElementById("quit");
  window.ready = readStorage();
  setInterval(readStorage,2000);
  //读取storage的数据
  function readStorage(){
    var storage = window.localStorage;
    if (typeof(storage["user"])=='undefined') {
      register.style.display ="inline-block";
      userLogin.style.display = "none";
       return false;
    }else if(storage["user"]==""){
      register.style.display ="inline-block";
      userLogin.style.display = "none";
       return false;
    }else {
      var myDate =  new Date();
      var currenTime = myDate.getTime();
      if (currenTime >= Number(storage["userTime"])+3600000) {
        storage["user"] =="";
      }else {
          register.style.display ="none";
          userLogin.style.display = "inline-block";
          userName.innerText = storage["user"];
      }

    }
  }
  quit.onclick = function (){
    var storage = window.localStorage;
    register.style.display ="inline-block";
    userLogin.style.display = "none";
    storage["user"] = "";
  }


    function regist(){
      var xmlhttp
      if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHttp")
      }else {
        xmlhttp = new XMLHttpRequest()
      }
      var area = 1;
      var url = "php/index.php?kind1="+area;
      console.log(url);
      xmlhttp.open("get",url,true);
      xmlhttp.send(null);
      xmlhttp.onreadystatechange = function (){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
           obj = JSON.parse(xmlhttp.response);
           switch (area) {
             case 1:
                 for (var i = 0; i < 3; i++) {
                   var objbody = JSON.parse(obj[i]);
                   var aboutNews = document.createElement("dl");
                   aboutNews.className = "aboutNews";
                   aboutNews.innerHTML = '<dt><a href="article.html?'+objbody.title+'"><img src="'+objbody.imgurl2+'" alt="" /></a></dt><dd><a href="article.html?'+objbody.title+'">'+objbody.title+'</a></dd><dd id ="'+objbody.wrap+'">'+objbody.title+'</dd>';
                    var dogs = document.getElementById('dogs');
                    dogs.appendChild(aboutNews);
                    // var dd = document.getElementById(objbody.wrap);
                    $('#'+objbody.wrap).load('data2.html #'+objbody.wrap+1);
                 }
                 area++;
                 url = "php/index.php?kind1="+area;
                 console.log(url);
                 xmlhttp.open("get",url,true);
                 xmlhttp.send(null);
               break;
               case 2:
               for (var i = 0; i <3; i++) {
                 var objbody = JSON.parse(obj[i]);
                 var aboutNews = document.createElement("dl");
                 aboutNews.className = "aboutNews";
                 aboutNews.innerHTML = '<dt><a href="article.html?'+objbody.title+'"><img src="'+objbody.imgurl2+'" alt="" /></a></dt><dd><a href="article.html?'+objbody.title+'">'+objbody.title+'</a></dd><dd id ="'+objbody.wrap+'">'+objbody.title+'</dd>';
                  var cats = document.getElementById('cats');
                  cats.appendChild(aboutNews);
                  // var dd = document.getElementById(objbody.wrap);
                  $('#'+objbody.wrap).load('data2.html #'+objbody.wrap+1);
               }
               area++;
               url = "php/index.php?kind1="+area;
               console.log(url);
               xmlhttp.open("get",url,true);
               xmlhttp.send(null);
               break;
               case 3:
               for (var i = 0; i <3; i++) {
                 var objbody = JSON.parse(obj[i]);
                 var aboutNews = document.createElement("dl");
                 aboutNews.className = "aboutNews";
                 aboutNews.innerHTML = '<dt><a href="article.html?'+objbody.title+'"><img src="'+objbody.imgurl2+'" alt="" /></a></dt><dd><a href="article.html?'+objbody.title+'">'+objbody.title+'</a></dd><dd id ="'+objbody.wrap+'">'+objbody.title+'</dd>';
                  var small = document.getElementById('small');
                  small.appendChild(aboutNews);
                  // var dd = document.getElementById(objbody.wrap);
                  $('#'+objbody.wrap).load('data2.html #'+objbody.wrap+1);
               }
               area++;
               url = "php/index.php?kind1="+area;
               console.log(url);
               xmlhttp.open("get",url,true);
               xmlhttp.send(null);
               break;
               case 4:
               for (var i = 0; i <3; i++) {
                 var objbody = JSON.parse(obj[i]);
                 var aboutNews = document.createElement("dl");
                 aboutNews.className = "aboutNews";
                 aboutNews.innerHTML = '<dt><a href="article.html?'+objbody.title+'"><img src="'+objbody.imgurl2+'" alt="" /></a></dt><dd><a href="article.html?'+objbody.title+'">'+objbody.title+'</a></dd><dd id ="'+objbody.wrap+'">'+objbody.title+'</dd>';
                  var water = document.getElementById('water');
                  water.appendChild(aboutNews);
                  // var dd = document.getElementById(objbody.wrap);
                  $('#'+objbody.wrap).load('data2.html #'+objbody.wrap+1);
               }
               area++;
               url = "php/index.php?kind1="+area;
               console.log(url);
               xmlhttp.open("get",url,true);
               xmlhttp.send(null);
               break;
               case 5:
               for (var i = 0; i <3; i++) {
                 var objbody = JSON.parse(obj[i]);
                 var aboutNews = document.createElement("dl");
                 aboutNews.className = "aboutNews";
                 aboutNews.innerHTML = '<dt><a href="article.html?'+objbody.title+'"><img src="'+objbody.imgurl2+'" alt="" /></a></dt><dd><a href="article.html?'+objbody.title+'">'+objbody.title+'</a></dd><dd id ="'+objbody.wrap+'">'+objbody.title+'</dd>';
                  var reptile = document.getElementById('reptile');
                  reptile.appendChild(aboutNews);
                  // var dd = document.getElementById(objbody.wrap);
                  $('#'+objbody.wrap).load('data2.html #'+objbody.wrap+1);
               }
               area++;
                url = "php/indexShop.php?bigkind="+(area-5);
                xmlhttp.open("get",url,true);
                xmlhttp.send(null);
               break;
               case 6:
               for (var i = 0; i < 4; i++) {
                 var objbody = JSON.parse(obj[i]);
                 var li = document.createElement("li");
                 li.innerHTML = '<a href="show.html?'+objbody.id+'"><dl class="name"><dt><img src="'+objbody.imgurl1+'" style="width:70%;"alt="" /></dt><dd>'+objbody.name+'</dd><dd>'+objbody.describe+'</dd></dl></a>';
                  var dogMerchandise  = document.getElementById('dogMerchandise');
                  dogMerchandise.appendChild(li);
               }
               area++;
                url = "php/indexShop.php?bigkind="+(area-5);
                console.log(url);
                xmlhttp.open("get",url,true);
                xmlhttp.send(null);
                break;
               case 7:
               for (var i = 0; i < 4; i++) {
                 var objbody = JSON.parse(obj[i]);
                 var li = document.createElement("li");
                 li.innerHTML = '<a href="show.html?'+objbody.id+'"><dl class="name"><dt><img src="'+objbody.imgurl1+'" style="width:70%;"alt="" /></dt><dd>'+objbody.name+'</dd><dd>'+objbody.describe+'</dd></dl></a>';
                  var catMerchandise  = document.getElementById('catMerchandise');
                  catMerchandise.appendChild(li);
               }
               area++;
                url = "php/indexShop.php?bigkind="+(area-5);
                xmlhttp.open("get",url,true);
                xmlhttp.send(null);
                break;
                case 8:
                for (var i = 0; i < 4; i++) {
                  var objbody = JSON.parse(obj[i]);
                  var li = document.createElement("li");
                  li.innerHTML = '<a href="show.html?'+objbody.id+'"><dl class="name"><dt><img src="'+objbody.imgurl1+'" style="width:70%;"alt="" /></dt><dd>'+objbody.name+'</dd><dd>'+objbody.describe+'</dd></dl></a>';
                   var smallMerchandise  = document.getElementById('smallMerchandise');
                   smallMerchandise.appendChild(li);
                }
                area++;
                 url = "php/indexShop.php?bigkind="+(area-5);
                 xmlhttp.open("get",url,true);
                 xmlhttp.send(null);
                 break;
                 case 9:
                 for (var i = 0; i < 4; i++) {
                   var objbody = JSON.parse(obj[i]);
                   var li = document.createElement("li");
                   li.innerHTML = '<a href="show.html?'+objbody.id+'"><dl class="name"><dt><img src="'+objbody.imgurl1+'" style="width:70%;"alt="" /></dt><dd>'+objbody.name+'</dd><dd>'+objbody.describe+'</dd></dl></a>';
                    var waterMerchandise  = document.getElementById('waterMerchandise');
                    waterMerchandise.appendChild(li);
                 }
                 area++;
                  url = "php/indexShop.php?bigkind="+(area-5);
                  xmlhttp.open("get",url,true);
                  xmlhttp.send(null);
                  break;
                  case 10:
                  for (var i = 0; i < 4; i++) {
                    var objbody = JSON.parse(obj[i]);
                    var li = document.createElement("li");
                    li.innerHTML = '<a href="show.html?'+objbody.id+'"><dl class="name"><dt><img src="'+objbody.imgurl1+'" style="width:70%;"alt="" /></dt><dd>'+objbody.name+'</dd><dd>'+objbody.describe+'</dd></dl></a>';
                     var reptileMerchandise  = document.getElementById('reptileMerchandise');
                     reptileMerchandise.appendChild(li);
                  }
                   break;
             default:
           }
        }
      }
    }
    regist();

    var keyword = document.getElementById("keyword");
    var search = document.getElementById("search");
    search.onclick = function () {
      if (!keyword.value) {
        keyword.focus();
      }else{
        window.open('wares.html?'+keyword.value);
      }
    }
  </script>
</html>
